<template>
  <div>
    <el-dialog :visible.sync="empolycard" title="人员信息" style="width: auto">
      <el-form
        ref="userinfo"
        :model="userinfo"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="人员编号">
          <el-input v-model="userinfo.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="人员姓名">
          <el-input v-model="userinfo.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="入职部门" prop="depid">
          <el-select
            v-model="userinfo.depid"
            placeholder="请选择"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="item in selectdepartment"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职职位" prop="post">
          <el-input v-model="userinfo.post"></el-input>
        </el-form-item>

        <el-form-item label="合同种类" prop="post">
          <el-select
            v-model="userinfo.contract_type"
            placeholder="请选择合同种类"
            style="width: 100%"
          >
            <el-option label="劳动合同" value="劳动合同"></el-option>
            <el-option label="劳务合同" value="劳务合同"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合同主体" prop="contract_body">
          <el-select
            v-model="userinfo.contract_body"
            placeholder="请选择合同主体"
            style="width: 100%"
          >
            <el-option
              label="东杰智能科技集团股份有限公司"
              value="东杰智能科技集团股份有限公司"
            ></el-option>
            <el-option
              label="太原东杰软件开发有限公司"
              value="太原东杰软件开发有限公司"
            ></el-option>
            <el-option
              label="太原东杰装备有限公司"
              value="太原东杰装备有限公司"
            ></el-option>
            <el-option
              label="东杰智能（深圳）有限公司"
              value="东杰智能（深圳）有限公司"
            ></el-option>
            <el-option
              label="东杰智能科技（江苏）有限公司"
              value="东杰智能科技（江苏）有限公司"
            ></el-option>
            <el-option
              label="东杰智能（山东）有限公司"
              value="东杰智能（山东）有限公司"
            ></el-option>
            <el-option
              label="东上杰智能科技（上海）有限公司"
              value="东上杰智能科技（上海）有限公司"
            ></el-option>
            <el-option
              label="深圳东杰智能研究中心有限公司"
              value="深圳东杰智能研究中心有限公司"
            ></el-option>
            <el-option
              label="深圳中集智能科技有限公司"
              value="深圳中集智能科技有限公司"
            ></el-option>
            <el-option
              label="常州海登赛思涂装设备有限公司"
              value="常州海登赛思涂装设备有限公司"
            ></el-option>
            <el-option
              label="邦芒服务外包有限公司太原分公司"
              value="邦芒服务外包有限公司太原分公司"
            ></el-option>
            <el-option
              label="山西九广成劳务派遣股份有限公司"
              value="山西九广成劳务派遣股份有限公司"
            ></el-option>
            <el-option
              label="山西众瑞人力资源管理有限公司"
              value="山西众瑞人力资源管理有限公司"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合同期限" prop="contract_long">
          <el-select
            v-model="userinfo.contract_long"
            placeholder="请选择合同期限"
            style="width: 100%"
          >
            <el-option label="三年" value="三年"></el-option>
            <el-option label="半年" value="半年"></el-option>
            <el-option label="一年" value="一年"></el-option>
            <el-option label="两年" value="两年"></el-option>
            <el-option label="五年" value="五年"></el-option>
            <el-option label="十年" value="十年"></el-option>
            <el-option label="长期" value="长期"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="起始日期" prop="contract_start"
          ><el-date-picker
            v-model="userinfo.contract_start"
            style="width: 100%"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="结束日期" prop="contract_end"
          ><el-date-picker
            v-model="userinfo.contract_end"
            style="width: 100%"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="入职日期" prop="employdate">
          <el-date-picker
            v-model="userinfo.employdate"
            type="date"
            placeholder="请选入职日期"
            style="width: 100%"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="人事范围" prop="hrrange">
          <el-select
            v-model="userinfo.hrrange"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option label="太原" value="太原"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="常州" value="常州"></el-option>
            <el-option label="马来西亚" value="马来西亚"></el-option>
            <el-option label="海登" value="海登"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工作地点" prop="workplace">
          <el-select
            v-model="userinfo.workplace"
            placeholder="请选择主要工作地"
            style="width: 100%"
          >
            <el-option label="太原" value="太原"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="常州" value="常州"></el-option>
            <el-option label="淄博" value="淄博"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="缴纳社保" prop="isss">
          <el-radio-group v-model="userinfo.isss">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="postempoly('userinfo')"
            >入职</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getpost();
    this.getDepartment();
    this.$bus.$on("sendEmpoly", (row) => {
      this.empolycard = true;
      this.getUserDetail(row);
    });
  },

  data() {
    return {
      selectpost: [],
      selectdepartment: [],
      userinfo: [],
      interviewid: "", //面试人
      empolycard: false,

      rules: {
        hrrange: [{ required: true, message: "请选择", trigger: "change" }],
        contract_long: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        contract_body: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        contract_type: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        contract_start: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        contract_end: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        isss: [{ required: true, message: "请选择", trigger: "change" }],
        workplace: [{ required: true, message: "请选择", trigger: "change" }],
        depid: [{ required: true, message: "请选择", trigger: "change" }],
        post: [{ required: true, message: "请选择", trigger: "change" }],
        employdate: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },

  methods: {
    async getDepartment() {
      try {
        let res = await this.$axios.get(`api/member/getdepartment`);
        this.selectdepartment = res.data;
      } catch (e) {}
    },

    async getpost() {
      this.$axios
        .post("api/member/getpost")
        .then((response) => {
          this.selectpost = response.data;
        })

        .catch(function (error) {
          console.log(error);
        });
    },

    async postempoly(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let datas = {
            userinfo: this.userinfo,
            userid: sessionStorage.getItem("userid"),
          };
          this.$axios
            .post("api/member/postadd", datas)
            .then((response) => {
              this.$notify({
                title: "成功",
                message: response.data,
                type: "success",
              });
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    async getUserDetail(row) {
      let id = row.id;
      try {
        let res = await this.$axios.get(`api/member/getuserdetail?id=` + id);
        this.userinfo = res.data.member[0];
        console.log(this.userinfo);
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss" scoped>
</style>